<template>
    <div class="query-container">
      <div class="query-filters">
        <div class="filter-group">
          <label>用户名：</label>
          <input type="text" v-model="usernameFilter" placeholder="请输入用户名">
        </div>
        
        <div class="filter-group">
          <label>状态：</label>
          <select v-model="statusFilter">
            <option value="">全部</option>
            <option value="active">活跃</option>
            <option value="inactive">不活跃</option>
            <option value="blocked">已封禁</option>
          </select>
        </div>
        
        <div class="filter-group">
          <label>注册日期：</label>
          <input type="date" v-model="startDate">
          <span>-</span>
          <input type="date" v-model="endDate">
        </div>
        
        <button @click="search">查询</button>
        <button @click="reset">重置</button>
      </div>
      
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>用户名</th>
              <th>邮箱</th>
              <th>注册日期</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in filteredUsers" :key="user.id">
              <td>{{ user.id }}</td>
              <td>{{ user.username }}</td>
              <td>{{ user.email }}</td>
              <td>{{ formatDate(user.registerDate) }}</td>
              <td>
                <span :class="{'status-active': user.status === 'active', 'status-inactive': user.status === 'inactive', 'status-blocked': user.status === 'blocked'}">
                  {{ user.status === 'active' ? '活跃' : user.status === 'inactive' ? '不活跃' : '已封禁' }}
                </span>
              </td>
              <td>
                <button @click="editUser(user.id)">编辑</button>
                <button @click="deleteUser(user.id)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div class="pagination">
        <button :disabled="currentPage === 1" @click="prevPage">上一页</button>
        <span>{{ currentPage }} / {{ totalPages }}</span>
        <button :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        users: [
          { id: 1, username: 'user1', email: 'user1@example.com', registerDate: '2023-01-15', status: 'active' },
          { id: 2, username: 'user2', email: 'user2@example.com', registerDate: '2023-02-20', status: 'inactive' },
          { id: 3, username: 'user3', email: 'user3@example.com', registerDate: '2023-03-10', status: 'active' },
          { id: 4, username: 'user4', email: 'user4@example.com', registerDate: '2023-04-05', status: 'blocked' },
          { id: 5, username: 'user5', email: 'user5@example.com', registerDate: '2023-05-25', status: 'active' },
          { id: 6, username: 'user6', email: 'user6@example.com', registerDate: '2023-06-18', status: 'inactive' },
          { id: 7, username: 'user7', email: 'user7@example.com', registerDate: '2023-07-02', status: 'active' },
          { id: 8, username: 'user8', email: 'user8@example.com', registerDate: '2023-08-14', status: 'blocked' },
          { id: 9, username: 'user9', email: 'user9@example.com', registerDate: '2023-09-28', status: 'active' },
          { id: 10, username: 'user10', email: 'user10@example.com', registerDate: '2023-10-12', status: 'inactive' }
        ],
        usernameFilter: '',
        statusFilter: '',
        startDate: '',
        endDate: '',
        currentPage: 1,
        pageSize: 5
      }
    },
    computed: {
      filteredUsers() {
        let result = this.users;
        
        if (this.usernameFilter) {
          result = result.filter(user => 
            user.username.toLowerCase().includes(this.usernameFilter.toLowerCase())
          );
        }
        
        if (this.statusFilter) {
          result = result.filter(user => user.status === this.statusFilter);
        }
        
        if (this.startDate) {
          result = result.filter(user => user.registerDate >= this.startDate);
        }
        
        if (this.endDate) {
          result = result.filter(user => user.registerDate <= this.endDate);
        }
        
        return result;
      },
      paginatedUsers() {
        const startIndex = (this.currentPage - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        return this.filteredUsers.slice(startIndex, endIndex);
      },
      totalPages() {
        return Math.ceil(this.filteredUsers.length / this.pageSize);
      }
    },
    methods: {
      formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString();
      },
      search() {
        this.currentPage = 1;
      },
      reset() {
        this.usernameFilter = '';
        this.statusFilter = '';
        this.startDate = '';
        this.endDate = '';
        this.currentPage = 1;
      },
      prevPage() {
        if (this.currentPage > 1) {
          this.currentPage--;
        }
      },
      nextPage() {
        if (this.currentPage < this.totalPages) {
          this.currentPage++;
        }
      },
      editUser(id) {
        alert(`编辑用户 ${id}`);
      },
      deleteUser(id) {
        if (confirm(`确定要删除用户 ${id} 吗？`)) {
          // 这里可以添加删除用户的逻辑
          alert(`用户 ${id} 已删除`);
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .query-container {
    padding: 20px;
  }
  
  .query-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
  }
  
  .filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .filter-group label {
    font-weight: 500;
  }
  
  .filter-group input, .filter-group select {
    padding: 8px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
  }
  
  .query-filters button {
    padding: 8px 16px;
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 5px;
  }
  
  .query-filters button:last-child {
    background-color: #f5222d;
  }
  
  .table-container {
    overflow-x: auto;
    margin-bottom: 20px;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    padding: 10px;
    border: 1px solid #e8e8e8;
    text-align: left;
  }
  
  th {
    background-color: #fafafa;
    font-weight: 600;
  }
  
  .status-active {
    color: #52c41a;
  }
  
  .status-inactive {
    color: #faad14;
  }
  
  .status-blocked {
    color: #f5222d;
  }
  
  td button {
    padding: 5px 10px;
    margin-right: 5px;
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  td button:last-child {
    background-color: #f5222d;
  }
  
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  
  .pagination button {
    padding: 8px 16px;
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .pagination button:disabled {
    background-color: #d9d9d9;
    cursor: not-allowed;
  }
  </style>
      